<template>
  <el-dialog
    title="查看投票详情"
    :visible.sync="visible"
    width="60%"
    append-to-body
  >
    <avue-crud
      ref="crud"
      v-model="form"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="voteRecordOption"
      @on-load="getList"
      @search-change="searchChange"
      @search-reset="searchReset"
    >
      <template v-slot:voter="{ row }">
        <div class="user-avatar">
          <el-avatar :src="row.avatar"></el-avatar>
          <span style="margin-left: 5px">{{ row.nickname }}</span>
        </div>
      </template>
      <template v-slot:userCode="{ row }">
        <el-button
          type="text"
          @click="showUserDialog(row.userId)"
        >
          {{ row.userCode }}
        </el-button>
      </template>
    </avue-crud>
    <user-info-dialog
      v-model="showUserInfo"
      :user-id="userId"
    ></user-info-dialog>
  </el-dialog>
</template>
<script>
import { voteRecordOption } from '@/const/crud/community-content/dynamic';
import { getVoteRecord } from '@/api/core/dynamic';
import crudMixins from '@/mixins/crud';
import userInfoDialog from './userInfoDialog.vue';
export default {
  components: {
    userInfoDialog,
  },
  mixins: [crudMixins],
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
    },
  },
  data() {
    return {
      form: {},
      voteRecordOption: voteRecordOption(),
      tableLoading: false,
      userId: '',
      showUserInfo: false,
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    id: {
      handler(val) {},
    },
  },
  methods: {
    getList(refresh) {
      if (refresh) {
        this.page.current = 1;
        this.page.currentPage = 1;
      }
      this.tableLoading = true;
      getVoteRecord(
        Object.assign({
          current: this.page.currentPage,
          size: this.page.pageSize,
          id: this.id,
        })
      )
        .then((res) => {
          this.tableData = res.data.data.records;
          this.page.total = res.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    showUserDialog(id) {
      this.showUserInfo = true;
      this.userId = id;
    },
  },
};
</script>
<style lang="scss" scoped>
.user-avatar {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
